<template>
  <div class="mpd-side-panel-component">
    <div class="padding-xs">
      <a-input-search v-model="searchValue" placeholder="输入关键字可过滤组件" allow-clear />
    </div>
    <scroll-container>
      <div class="group-container">
        <div class="group-item padding-l-xs" v-for="(item1, index1) in groupList" :key="index1">
          <div class="title">
            {{ item1.title || '未设置分组名称' }}
          </div>
          <div class="display-flex flex-wrap">
            <div
              class="padding-r-xs padding-b-xs width-half"
              v-for="(element, index) in item1.list"
              :key="index"
              :draggable="true"
              @dragover.prevent
              @dragstart="(e) => draggableHandle('dragstart', e, element)"
              @dragend="(e) => draggableHandle('dragend', e, element)"
            >
              <!-- 展示配置的组件列表 -->
              <a-tag class="padding-xs cursor-move">
                <div class="display-flex flex-align-items-center">
                  <mpd-icon
                    v-if="element.ext && element.ext.icon"
                    :icon="element.ext.icon"
                    style="font-size: 16px"
                  ></mpd-icon>
                  <span class="flex-size-auto padding-l-xs text-ellipsis">{{ element.title }}</span>
                  <a-popover
                    placement="right"
                    v-if="element.ext && element.ext.help"
                    :overlayStyle="{ maxWidth: '400px' }"
                    :destroyTooltipOnHide="true"
                  >
                    <mpd-icon class="cursor-pointer" icon="mpd-icon-question"></mpd-icon>
                    <template #title>
                      <span>{{ element.ext.help }}</span>
                    </template>
                    <template #content>
                      <component :is="element.component"></component>
                    </template>
                  </a-popover>
                </div>
              </a-tag>
            </div>
          </div>
        </div>
      </div>
    </scroll-container>
  </div>
</template>

<script>
import setting from '@/store/setting'
import library from '@/library'
import _ from 'lodash'

export default {
  data() {
    return {
      setting,
      searchValue: ''
    }
  },
  inject: ['selectPageNodeDom'],
  computed: {
    groupList() {
      const tmp = _.cloneDeep(library.getLibraryData())
      if (this.searchValue) {
        return tmp.filter((item) => {
          if (item.title.includes(this.searchValue)) {
            return true
          } else if (item.list && item.list.length > 0) {
            item.list = item.list.filter((obj) => obj.title.includes(this.searchValue))
            if (item.list.length > 0) {
              return true
            }
          }
          return false
        })
      } else {
        return tmp
      }
    }
  },
  methods: {
    // 处理拖拽事件
    draggableHandle(type, event, element) {
      switch (type) {
        case 'dragstart':
          setting.isDraggable = true
          this.selectPageNodeDom.dragItem = element
          break
        case 'dragend':
          setting.isDraggable = false
          this.selectPageNodeDom.dragItem = {}
          this.selectPageNodeDom.dragFlag = false
          break
      }
    }
  }
}
</script>

<style lang="less">
.mpd-side-panel-component {
  height: 100%;
  .mpd-scroll-container {
    height: calc(100% - 50px) !important;
  }
  .group-container {
    .group-item {
      .title {
        color: #000000;
      }
      .ant-tag {
        width: 100%;
        &:hover {
          background: #eeeeee;
        }
      }
    }
  }
}
</style>
